<script setup lang="ts">
import {onMounted, ref} from "vue";
import $bus from '@/utils/emitter.ts'
import tagsApi from "@/api/tags.ts";
import LayoutStore from "@/store/modules/setting.ts";
const layoutStore = LayoutStore()
const tags = ref()
const activeId = ref()
const isLoading = ref(false)
onMounted(async ()=>{
  isLoading.value = true
  await tagsApi.getTags().then( (res:any) =>{
    tags.value = res.data
  })
  isLoading.value = false
})
const clickTagHandle = (tagId:number) => {
  activeId.value = tagId
  const el = document.querySelector('.category-active')
  if (el) {
    el.classList.remove('category-active')
  }
  layoutStore.setIsCategoryOrTag(true)

  // 发送查询请求
  $bus.emit('getArticlePageHandle', {tagId:tagId})
}
</script>

<template>
  <div class="right-1-1">
    <div class="header">热门标签</div>
    <div class="content" v-if="!isLoading">
      <div class="item" v-for="(item, index) in tags"
           :key="index"
           @click="clickTagHandle(item.id)"
           :class="item.id == activeId ? 'tag-active' : ''"
           :style="{backgroundColor: item.bgColor,color: item.textColor}">
        {{item.name}}
      </div>
    </div>
    <div v-else style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center">
      <a-spin></a-spin>
    </div>
  </div>
</template>
<style scoped lang="scss">
.right-1-1{
  .header{
    margin-bottom: 5px;
    font-size: 17px;
  }
  .content{
    display: flex;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 10px;
    color: white;
    font-size: 12px;
    .item{
      padding: 3px 8px;
      border-radius: 5px;
      cursor: pointer;
    }
    .tag-active{
     box-shadow: 0 0 10px 1px rgba(255, 0, 0, 0.5);;
    }
  }
}
</style>
